<template>
  <view class="member-item">
    <view class="top-wrap">
      <view class="member-avatar">
        <image src="/static/defaultAvatar.png" class="member-avatar-image" />
      </view>
      <view class="member-info-wrap">
        <view class="member-info-top">
          <view class="member-name">
            <text>{{ data.name }}</text>
          </view>
          <view class="member-phone">
            <text>{{ data.phone }}</text>
          </view>
        </view>
        <view class="member-info-bottom">
          <view class="last-cost">
            <text>最近到店</text>
            <text class="last-cost-value">{{ (data.lastCostDate||data.createdAt)|formatDate }}</text>
          </view>
          <view class="member-balance">
            <text>余额</text>
            <text class="balance-value">{{ data.balance }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {
          name: "",
          phone: "",
          lastCostDate: "2020-06-01 16:00:38",
          balance: "0.00"
        };
      }
    }
  },
  data() {
    return {};
  }
};
</script>

<style scoped lang="scss">
.member-item {
  padding: 15rpx 20rpx;
  .top-wrap {
    display: flex;
    .member-avatar {
      height: 100rpx;
      width: 100rpx;
      .member-avatar-image {
        height: 100%;
        width: 100%;
      }
    }

    .member-info-wrap {
      margin-left: 20rpx;
      display: flex;
      flex-grow: 1;
      flex-direction: column;
      justify-content: space-between;
      .member-info-top {
        display: flex;
        justify-content: space-between;
      }
      .member-info-bottom {
        display: flex;
        justify-content: space-between;
        .last-cost {
          font-size: 26rpx;
          color: $uni-text-color-grey;
          .last-cost-value {
            margin-left: 10rpx;
          }
        }

        .member-balance {
          font-size: 26rpx;
          .balance-value {
            margin-left: 10rpx;
          }
        }
      }
    }
  }
}
</style>
